import React, { Component } from "react";
import { Toast } from "antd-mobile";
import Scroll from "@/component/scroll";
import MainLayout from "@/component/mainLayout/mainLayout";
import XHQBConfig from "@/config/XHQBConfig";
import yhTools from "@/tools/yh";
import "./index.scss";
import leftIcon from "@images/xhdArrow.png";

class MyReturn extends Component {
	constructor(props) {
		super(props);
		this.state = {
			bulletins: [],
			xhfData: {},
			xhdData: {}
		};
	}
	componentDidMount() {
		this.init();
	}
	init() {
		let objs = {
			url: XHQBConfig.myRerurn,
			params: {},
			_alertShow: false
		};
		let _that = this;
		yhTools.request(objs).then(res => {
			if (res.code === "0") {
				if (res.data.credits && res.data.credits.length == 2) {
					_that.setState({
						bulletins: res.data.bulletins,
						xhfData: res.data.credits[0],
						xhdData: res.data.credits[1]
					});
				}
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	render() {
		const { xhfData, xhdData } = this.state;
		const _pageParams = {
			header: {
				title: "我的待还",
				goToApp: false
			},
			history: this.props.history
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="xhqb-myreturn">
					<div className="pro-box">
						<Scroll isScroll={true}>
							<div className="pro-list">
								<div className="item left">
									{xhfData.creditStatus == "1" ? (
										<div>
											<p className="title">小辉付</p>
											<p className="kedu-lable">可用额度(元)</p>
											<p className="kedu-number">{xhfData.useAmount}</p>
											<p className="zedu">总额度 {xhfData.creditAmount}</p>
										</div>
									) : (
										<div>
											<p className="title">小辉付</p>
											<p className="desc-top">{xhfData.title1}</p>
											<p className="desc-bot">{xhfData.title2}</p>
											<div className="btn">立即申请</div>
										</div>
									)}
								</div>
								<div className="item right">
									{xhdData.creditStatus == "1" ? (
										<div>
											<p className="title">小辉贷</p>
											<p className="kedu-lable">可用额度(元)</p>
											<p className="kedu-number">{xhdData.useAmount}</p>
											<p className="zedu">总额度 {xhdData.creditAmount}</p>
										</div>
									) : (
										<div>
											<p className="title">小辉贷</p>
											<p className="desc-top">{xhdData.title1}</p>
											<p className="desc-bot">{xhdData.title2}</p>
											<div className="btn">立即申请</div>
										</div>
									)}
								</div>
							</div>
						</Scroll>
					</div>
					<div className="pro-status">
						<div className="item-status xhf">
							<div className="left">
								<p className="title">小辉付</p>
								<p className="status-desc">06月暂无待还</p>
							</div>
							<div className="right">
								<span>
									查看账单 <img src={leftIcon} alt="" />
								</span>
							</div>
						</div>
						<div className="item-status xhd">
							<div className="left">
								<p className="title">小辉贷</p>
								<p className="status-desc">06月暂无待还</p>
							</div>
							<div className="right">
								<span>
									立即还款 <img src={leftIcon} alt="" />
								</span>
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

export default MyReturn;
